<template>
  <div class="container">
    <div style="position: absolute;left: 20%;">
    <h3>学生作业批改</h3>

    
 
    <h3>作业列表</h3>
    <div>
      <el-table :data="tableData" border style="width:700px">
        <el-table-column prop="date" label="学号" width="150"></el-table-column>
        <el-table-column prop="name" label="姓名" width="120"></el-table-column>
        <el-table-column prop="homework" label="作业名" width="120"></el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">下载</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">评分</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "homework",
  data() {
    return {
      tableData: [
        {
          date: "1710705312",
          name: "王小虎",
         homework:"第一章"
        },
        {
           date: "1710705312",
          name: "王小虎",
         homework:"第二章"
        },
        {
          date: "1710705312",
          name: "王小虎",
         homework:"第三章"
        },
        {
          date: "1710705312",
          name: "王小虎",
         homework:"第四章"
        }
      ]
    };
  },
  methods: {
    handleClick(row) {
      console.log(row);
    }
  }
};
</script>

<style scoped>
input {
  width: 110px;
}
.container {
  display: flex;
  flex-flow: column;
  align-items: baseline;
  position: relative;
}
.container >>> .el-table--scrollable-x .el-table__body-wrapper {
  overflow-x: hidden;
}
</style>